<template>
    <div class="all">
        <!-- <div style="text-align:center;font-size:28px;font-weight:bold;">{{$route.name}}</div> -->
        <div class="search">
            <el-form ref="form" :model="activeSearch" :inline="true" size="mini">
                <el-form-item label="福利名称：">
                    <el-input v-model="activeSearch.name" clearable placeholder="请输入福利名称"></el-input>
                </el-form-item>
                <el-form-item label="合作负责人：">
                    <el-input v-model="activeSearch.partner_name" clearable placeholder="请输入合作负责人"></el-input>
                </el-form-item>
                <el-form-item label="负责人电话：">
                    <el-input
                        v-model="activeSearch.phone"
                        clearable
                        placeholder="请输入负责人电话"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchClick(2)">查 询</el-button>
                </el-form-item>
            </el-form>
            <a class="dn" id="exportToExcel" style="visibility:hidden"></a>
        </div>
        <div class="btn" v-if="jurisdiction.add_state === 1">
            <el-button size="medium" type="primary" @click="add()">添 加</el-button>
        </div>
        <span v-else></span>
        <div class="table">
            <!-- 表格 -->
            <el-table
                :data="activeTable"
                border
                height="560"
                :style="{width:screenWidth+'px'}"
                :cell-style="cellStyle"
                :header-cell-style="rowClass"
                @selection-change="allSelectionChange"
            >
                <!-- <el-table-column type="selection" width="60px"></el-table-column> -->
                <el-table-column label="序号" width="80px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.id }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="福利名称" width="180px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="优惠券数量" width="100px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.number }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="优惠券面额" width="100px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.money }}元</span>
                    </template>
                </el-table-column>
                <el-table-column label="优惠券截止时间" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.end_time*1000 | formatDate }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="城市" width="100px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.city }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="车辆类型" width="100px">
                    <template slot-scope="scope">
                        <span>{{ cartype[scope.row.type] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="合作方" width="140px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.partner }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="合作负责人" width="140px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.partner_name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="负责人电话" width="140px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.phone }}</span>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip label="合作地址" width="140px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.address }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="发布人" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.create_name }}</span>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip label="备注" width="140px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.note }}</span>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip label="优惠券使用限制" width="170px">
                    <template slot-scope="scope">
                        <div class="tl p10">
                            <span>有效期：{{ scope.row.coupon_time }}天</span><br>
                            <span>车辆限制：{{ runtype[scope.row.run] }}</span><br>
                            <span>洗车模式：{{ washtype[scope.row.wash_type] }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="240px" v-if="jurisdiction.update_state === 1 || jurisdiction.delete_state === 1 || jurisdiction.export_state === 1">
                    <template slot-scope="scope">
                        <el-button
                            v-if="jurisdiction.export_state === 1"
                            size="small"
                            type="success"
                            @click="download(scope.$index, scope.row)"
                        >下载</el-button>
                        <el-button
                            v-if="jurisdiction.update_state === 1"
                            size="small"
                            type="primary"
                            @click="edit(scope.$index, scope.row)"
                        >修改</el-button>
                        <el-button
                            v-if="jurisdiction.delete_state === 1"
                            size="small"
                            type="danger"
                            @click="remove(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
                @size-change="pageCount"
                @current-change="currentPageCount"
                :current-page="currentPage"
                :page-sizes="[100, 500,1000,1500, 2000]"
                :page-size="currentCount"
                layout="prev, pager, next, jumper, sizes,total"
                :total="pageResultSize"
            ></el-pagination>
        </div>
        <div>
            <!-- 添加对话框 -->
            <el-dialog title="添加" width="60%" :visible.sync="addVisible" center @close="closeAdd">
                <el-form :model="addActive" :rules="addRules" ref="addActive">
                    <div class="flex">
                        <el-form-item label="福利名称：" prop="name" :label-width="formLabelWidth">
                            <el-input clearable v-model="addActive.name" placeholder="请输入福利名称"></el-input>
                        </el-form-item>
                        <el-form-item
                            label="优惠券数量："
                            prop="number"
                            :label-width="formLabelWidth"
                        >
                            <el-input clearable v-model="addActive.number" placeholder="请输入优惠券数量"></el-input>
                        </el-form-item>
                    </div>
                    <div class="flex">
                        <el-form-item
                            label="优惠券面额："
                            prop="money"
                            :label-width="formLabelWidth"
                        >
                            <el-input clearable v-model="addActive.money" placeholder="请输入优惠券面额"></el-input>
                        </el-form-item>
                        <el-form-item
                            label="截止时间："
                            prop="end_time"
                            :label-width="formLabelWidth"
                        >
                            <el-date-picker
                                v-model="addActive.end_time"
                                type="date"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                                :picker-options="pickerOptions"
                                placeholder="请选择优惠券截止时间"
                            ></el-date-picker>
                        </el-form-item>
                    </div>
                    <div class="flex">
                        <el-form-item label="城市：" prop="city" :label-width="formLabelWidth">
                            <el-select clearable v-model="addActive.city">
                                <el-option
                                    v-for="(item,index) in cityList"
                                    :key="index"
                                    :label="item.city"
                                    :value="item.city"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="车辆类型：" prop="type" :label-width="formLabelWidth">
                            <el-select clearable v-model="addActive.type">
                                <el-option
                                    v-for="(item,index) in cartype"
                                    :key="index"
                                    :label="item"
                                    :value="index"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="flex">
                        <el-form-item label="合作方：" prop="partner" :label-width="formLabelWidth">
                            <el-input clearable v-model="addActive.partner" placeholder="请输入合作方"></el-input>
                        </el-form-item>
                        <el-form-item
                            label="合作地址："
                            prop="address"
                            :label-width="formLabelWidth"
                        >
                            <el-input clearable v-model="addActive.address" placeholder="请输入合作地址"></el-input>
                        </el-form-item>
                    </div>
                    <div class="flex">
                        <el-form-item label="合作负责人：" prop="partner_name" :label-width="formLabelWidth">
                            <el-input clearable v-model="addActive.partner_name" placeholder="请输入合作负责人"></el-input>
                        </el-form-item>
                        <el-form-item
                            label="负责人电话："
                            prop="phone"
                            :label-width="formLabelWidth"
                        >
                            <el-input clearable v-model="addActive.phone" placeholder="请输入负责人电话"></el-input>
                        </el-form-item>
                        <el-form-item label="发布人：" prop="create_name" :label-width="formLabelWidth">
                            <el-input clearable v-model="addActive.create_name" placeholder="请输入发布人"></el-input>
                        </el-form-item>
                    </div>
                    <div class="flex">
                        <el-form-item label="车辆状态：" prop="run" :label-width="formLabelWidth">
                            <!-- create_name <el-input clearable v-model="addActive.run" placeholder="请选择车辆状态限制"></el-input> -->
                            <el-select clearable v-model="addActive.run" placeholder="请选择洗车模式限制">
                                <el-option v-for="(item,index) in runtype" :key="index" :label="item" :value="index"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="洗车模式：" prop="wash_type" :label-width="formLabelWidth">
                            <!-- <el-input clearable v-model="addActive.wash_type" placeholder="请选择洗车模式限制"></el-input> -->
                            <el-select clearable v-model="addActive.wash_type" placeholder="请选择洗车模式限制">
                                <el-option v-for="(item,index) in washtype" :key="index" :label="item" :value="index"></el-option>
                            </el-select>                        
                        </el-form-item>
                        <el-form-item label="优惠券有效期：" prop="coupon_time" :label-width="formLabelWidth">
                            <el-input clearable v-model="addActive.coupon_time" placeholder="请输入领取后优惠券的有效期"></el-input>
                        </el-form-item>
                    </div>
                    <el-form-item label="备注：" :label-width="formLabelWidth">
                        <el-input
                            type="textarea"
                            autosize
                            v-model="addActive.note"
                            placeholder="请输入备注"
                        ></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <el-button @click="cancelAdd">取 消</el-button>
                    <el-button type="primary" @click="confirmAdd">确 定</el-button>
                </div>
            </el-dialog>
            <!-- 修改对话框 -->
            <el-dialog title="修改" width="60%" :visible.sync="editVisible" center @close="closeEdit">
                <el-form :model="editActive" :rules="addRules" ref="editActive">
                    <div class="flex">
                        <el-form-item label="福利名称：" prop="name" :label-width="formLabelWidth">
                            <el-input clearable v-model="editActive.name" placeholder="请输入福利名称"></el-input>
                        </el-form-item>
                        <el-form-item
                            label="优惠券数量："
                            prop="number"
                            :label-width="formLabelWidth"
                        >
                            <el-input clearable v-model="editActive.number" placeholder="请输入优惠券数量"></el-input>
                        </el-form-item>
                    </div>
                    <div class="flex">
                        <el-form-item
                            label="优惠券面额："
                            prop="money"
                            :label-width="formLabelWidth"
                        >
                            <el-input clearable v-model="editActive.money" placeholder="请输入优惠券面额"></el-input>
                        </el-form-item>
                        <el-form-item
                            label="截止时间："
                            prop="end_time"
                            :label-width="formLabelWidth"
                        >
                            <el-date-picker
                                v-model="editActive.end_time"
                                type="date"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                                :picker-options="pickerOptions"
                                placeholder="请选择优惠券截止时间"
                            ></el-date-picker>
                        </el-form-item>
                    </div>
                    <div class="flex">
                        <el-form-item label="城市：" prop="city" :label-width="formLabelWidth">
                            <el-select clearable v-model="editActive.city">
                                <el-option
                                    v-for="(item,index) in cityList"
                                    :key="index"
                                    :label="item.city"
                                    :value="item.cityValue"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="车辆类型：" prop="type" :label-width="formLabelWidth">
                            <el-select clearable v-model="editActive.type">
                                <el-option
                                    v-for="(item,index) in cartype"
                                    :key="index"
                                    :label="item"
                                    :value="index"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="flex">
                        <el-form-item label="合作方：" prop="partner" :label-width="formLabelWidth">
                            <el-input clearable v-model="editActive.partner" placeholder="请输入合作方"></el-input>
                        </el-form-item>
                        <el-form-item
                            label="合作地址："
                            prop="address"
                            :label-width="formLabelWidth"
                        >
                            <el-input clearable v-model="editActive.address" placeholder="请输入合作地址"></el-input>
                        </el-form-item>
                    </div>
                    <div class="flex">
                        <el-form-item label="合作负责人：" prop="partner_name" :label-width="formLabelWidth">
                            <el-input clearable v-model="editActive.partner_name" placeholder="请输入合作负责人"></el-input>
                        </el-form-item>
                        <el-form-item
                            label="负责人电话："
                            prop="phone"
                            :label-width="formLabelWidth"
                        >
                            <el-input clearable v-model="editActive.phone" placeholder="请输入负责人电话"></el-input>
                        </el-form-item>
                     <el-form-item label="发布人：" prop="create_name" :label-width="formLabelWidth">
                            <el-input clearable v-model="editActive.create_name" placeholder="请输入发布人"></el-input>
                        </el-form-item>
                    </div>
                    <div class="flex">
                        <el-form-item label="车辆状态：" prop="run" :label-width="formLabelWidth">
                            <!-- create_name <el-input clearable v-model="addActive.run" placeholder="请选择车辆状态限制"></el-input> -->
                            <el-select clearable v-model="editActive.run" placeholder="请选择洗车模式限制">
                                <el-option v-for="(item,index) in runtype" :key="index" :label="item" :value="index"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="洗车模式：" prop="wash_type" :label-width="formLabelWidth">
                            <!-- <el-input clearable v-model="addActive.wash_type" placeholder="请选择洗车模式限制"></el-input> -->
                            <el-select clearable v-model="editActive.wash_type" placeholder="请选择洗车模式限制">
                                <el-option v-for="(item,index) in washtype" :key="index" :label="item" :value="index"></el-option>
                            </el-select>                        
                        </el-form-item>
                        <el-form-item label="优惠券有效期：" prop="coupon_time" :label-width="formLabelWidth">
                            <el-input clearable v-model="editActive.coupon_time" placeholder="请输入领取后优惠券的有效期"></el-input>
                        </el-form-item>
                    </div>
                    <el-form-item label="备注：" :label-width="formLabelWidth">
                        <el-input
                            type="textarea"
                            autosize
                            v-model="editActive.note"
                            placeholder="请输入备注"
                        ></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <el-button @click="cancelEdit">取 消</el-button>
                    <el-button type="primary" @click="confirmEdit">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import "../../../static/scss/page.scss";
import utils from "../../util/request";
import {formatDate} from "../../util/time.js";
import {timetamp} from "../../util/time.js"
import {date} from "../../util/time.js"
export default {
    data() {
        return {
            // 分页
            jurisdiction: null,
            currentPage: 1, //初始页面
            currentCount: 100, //当前页面的数据数量
            pageResultSize: 10, //表格数据总数
            screenWidth: window.innerWidth, //可视宽度
            addVisible: false, //添加对话框
            editVisible: false, //修改对话框
            formLabelWidth: "130px", //表单label宽度
            runtype:["通用","运营车","私家车"],
            washtype:["通用","精洗","快洗"],
            cartype:["通用","小汽车","SUV","MPV"],
            addActive: {
                //添加对话框表单
                name: "", //福利名称
                number: "", //优惠券数量
                money: "", //优惠券面额
                end_time: "", //优惠券截止时间
                city: "", //城市
                type: "", //车辆类型
                partner: "", //合作方
                partner_name: "", //合作负责人
                phone: "", //负责人电话
                address: "", //合作地址
                note: "", //备注
                create_name: "",
                run: "",
                wash_type: "",
                coupon_time: ""
            },
            editActive: {
                //修改对话框表单
                id: "",
                name: "", //福利名称
                number: "", //优惠券数量
                money: "", //优惠券面额
                end_time: "", //优惠券截止时间
                city: "", //城市
                type: "", //车辆类型
                partner: "", //合作方
                partner_name: "", //合作负责人
                phone: "", //负责人电话
                address: "", //合作地址
                note: "", //备注
                create_name: "",
                run: "",
                wash_type: "",
                coupon_time: "",
                index: ""
            },
            pickerOptions: {
                disabledDate(time) {
                    return (
                        time.getTime() <
                        new Date().getTime() - 24 * 60 * 60 * 1000
                    );
                }
            },
            activeSearch: {
                //搜索
                name: "", //福利名称
                partner_name: "", //合作负责人
                phone: "" //负责人电话
            },
            cityList: [
                {
                    city: "深圳",
                    cityValue: "深圳"
                },
                {
                    city: "北京",
                    cityValue: "北京"
                },
                {
                    city: "上海",
                    cityValue: "上海"
                },
                {
                    city: "广州",
                    cityValue: "广州"
                }
            ],
            typeList: [
                {
                    type: "小汽车",
                    typeValue: "小汽车"
                },
                {
                    type: "SUV",
                    typeValue: "SUV"
                },
                {
                    type: "MPV",
                    typeValue: "MPV"
                }
            ],
            addRules:  {
                // 表单验证
                create_name: [
                    {
                        required: true,
                        message: "请输入发布人姓名",
                        trigger: "change"
                    }
                ],
                name: [
                    {
                        required: true,
                        message: "请输入活动名称",
                        trigger: "blur"
                    }
                ],
                end_time: [
                    {
                        required: true,
                        message: "请选择优惠券截止时间",
                        trigger: "change"
                    }
                ],
                number: [
                    {
                        required: true,
                        message: "请输入优惠券数量",
                        trigger: "blur"
                    }
                ],
                money: [
                    {
                        required: true,
                        message: "请输入优惠券面额",
                        trigger: "blur"
                    }
                ],
                city: [
                    {
                        required: true,
                        message: "请选择城市",
                        trigger: "change"
                    }
                ],
                type: [
                    {
                        required: true,
                        message: "请选择车辆类型",
                        trigger: "change"
                    }
                ],
                partner: [
                    {
                        required: true,
                        message: "请输入合作方",
                        trigger: "blur"
                    }
                ],
                address: [
                    {
                        required: true,
                        message: "请输入合作地址",
                        trigger: "blur"
                    }
                ],
                partner_name: [
                    {
                        required: true,
                        message: "请输入合作负责人",
                        trigger: "blur"
                    }
                ],
                phone: [
                    {
                        required: true,
                        message: "请输入负责人电话",
                        trigger: "blur"
                    }
                ],
                run: [
                    {
                        required: true,
                        message: "请选择优惠券使用的车辆状态",
                        trigger: "change"
                    }
                ],
                wash_type: [
                    {
                        required: true,
                        message: "请选择优惠券使用的洗车模式",
                        trigger: "change"
                    }
                ],
                coupon_time: [
                    {
                        required: true,
                        message: "请输入优惠券的有效期",
                        trigger: "blur"
                    }
                ]
            },
            activeTable: [
                {
                    name: "中石油公司福利", //福利名称
                    number: 100, //优惠券数量
                    money: 5, //优惠券面额
                    end_time: "2021-08-15", //优惠券截止时间
                    city: "深圳", //城市
                    type: "小汽车", //车辆类型
                    partner: "中石油", //合作方
                    partner_name: "王先生", //合作负责人
                    phone: "18888888888", //负责人电话
                    address: "xx街道888号", //合作地址
                    create_name: "张三", //发布人
                    note:
                        "发放100张 5元优惠券给合作企业中石油员工 作为福利..............(鼠标指向查看详情)" //备注
                },
                {
                    name: "中石油公司福利", //福利名称
                    number: 100, //优惠券数量
                    money: 5, //优惠券面额
                    end_time: "2021-08-15", //优惠券截止时间
                    city: "深圳", //城市
                    type: "小汽车", //车辆类型
                    partner: "中石油", //合作方
                    partner_name: "王先生", //合作负责人
                    phone: "18888888888", //负责人电话
                    address: "xx街道888号", //合作地址
                    create_name: "张三", //发布人
                    note: "" //备注
                },
                {
                    name: "中石油公司福利", //福利名称
                    number: 100, //优惠券数量
                    money: 5, //优惠券面额
                    end_time: "2021-08-15", //优惠券截止时间
                    city: "深圳", //城市
                    type: "小汽车", //车辆类型
                    partner: "中石油", //合作方
                    partner_name: "王先生", //合作负责人
                    phone: "18888888888", //负责人电话
                    address: "xx街道888号", //合作地址
                    create_name: "张三", //发布人
                    note: "" //备注
                }
            ]
        };
    },
    filters:{
        // 时间
		formatDate(time){
			var date = new Date(time);
			return formatDate(date, 'yyyy-MM-dd');
		},
		formatDateBehind(time){
			var date = new Date(time);
			return formatDate(date, 'hh:mm:ss')
		}
    },
    methods: {
        searchClick(num) {
            // 查询
            let data = {page:this.currentPage,list_rows:this.currentCount};
            for(var i in this.activeSearch) this.activeSearch[i] !== "" ? data[i] = this.activeSearch[i] : "";
            utils.request("/couponCode/list","post",JSON.stringify(data)).then(resp=>{
                console.log(resp);
                this.activeTable = resp.data.data.data;
                this.pageResultSize = resp.data.data.total;
                if(num === 2){
                    resp.data.data.total 
                    ? this.$message({
                        message: "找到"+resp.data.data.total+"条超时信息",
                        type: "success"
                    }) : this.$message("没有符合条件的数据")
                }else{return}
            })
        },
        add() {
            // 添加券码活动
            this.addVisible = true;
        },
        confirmAdd() {
            // 确认添加
            this.$refs["addActive"].validate(valid => {
                if (valid) {
                    let that = this;
                    let data = {};
                    for(var i in this.addActive) data[i] = this.addActive[i];
                    data.end_time = timetamp(data.end_time)
                    data.city_type = 1;
                    // console.log(data)
                    // that.activeTable.length < that.currentCount ? that.activeTable.push(data) : "";
                    utils.request("/couponCode/add","post",JSON.stringify(data)).then(resp=>{
                        console.log(resp)
                        if(resp.data.code === 200){
                            data.id = resp.data.data;
                            that.activeTable.length < that.currentCount ? that.activeTable.push(data) : "";
                            this.addVisible = false;
                            that.addActive[i] = "";
                            this.$message({
                                message: "添加成功！",
                                type: "success"
                            })
                        }else{return}
                    })
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        cancelAdd() {
            // 取消添加
            this.addVisible = false;
            this.$refs["addActive"].resetFields();
            // this.addActive.note = "";
            for(var i in this.addActive) this.addActive[i] = "";
        },
        closeAdd() {
            // 关闭添加对话框
            this.addVisible = false;
            // this.addActive.note = "";
            for(var i in this.addActive) this.addActive[i] = "";
            this.$refs["addActive"].resetFields();
        },
        download(index, row) {
            // 下载
            let data = {couponCodeId:row.id,partner:row.partner}
            console.log(data)
            utils.request("/codec/exportCode","post",JSON.stringify(data)).then(resp=>{
                console.log(resp)
                // 下载表单内容需要转码，不然会是跳转不能下载
                let Base64 = require('js-base64').Base64;
                // 下载数据的封装，添加完整的标签代码
                const template = `<html xmlns:o="urn:schemas-microsoft-com:office:office" 
                xmlns:x="urn:schemas-microsoft-com:office:excel" 
                xmlns="http://www.w3.org/TR/REC-html40">
                <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
                <x:Name>123</x:Name>
                <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
                </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
                </head><body>${resp.data}</body></html>`;//${resp.data}是一个table闭合标签的数据
                // 定义下载文件的类型
                const uri = 'data:application/vnd.ms-excel;base64,';
                // window.location.href = uri + Base64.encode(template);
                document.getElementById('exportToExcel').href = uri + Base64.encode(template);
                // 补后缀
                let name = row.name+'兑换码报表.xls'
                document.getElementById('exportToExcel').download = name;
                document.getElementById('exportToExcel').click();
            })
        },
        edit(index, row) {
            // 修改
            for(var i in this.editActive) this.editActive[i] = row[i];
            this.editActive.end_time !== "" || this.editActive.end_time !== null ? this.editActive.end_time = date(this.editActive.end_time*1000) : "";
            this.editActive.index = index;
            console.log(this.editActive)
            this.editVisible = true;
        },
        confirmEdit() {
            // 确认修改
            this.$refs["editActive"].validate(valid => {
                if (valid) {
                    let that = this;
                    let data = {};
                    for(var i in this.editActive) i !== "index" ? data[i] = this.editActive[i] : "";
                    data.end_time = timetamp(data.end_time)
                    // console.log(data,this.editActive.end_time)
                    utils.request("/couponCode/update","post",JSON.stringify(data)).then(resp=>{
                        console.log(resp)
                        if(resp.data.code === 200){
                            that.editVisible = false;
                            this.$refs["editActive"].resetFields();
                            let key = that.editActive.index;
                            that.activeTable.splice(key,1,data);
                            that.$message({
                                message: "修改成功！",
                                type: "success"
                            })
                        }else{return}
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        cancelEdit() {
            // 取消修改
            this.editVisible = false;
            // this.editActive.note = "";
            for(var i in this.editActive) this.editActive[i] = "";
            this.$refs["editActive"].resetFields();
        },
        closeEdit() {
            // 关闭修改对话框
            this.editVisible = false;
            // this.editActive.note = "";
            for(var i in this.editActive) this.editActive[i] = "";
            this.$refs["editActive"].resetFields();
        },
        remove(index, row) {
            // 删除
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                utils.request("/couponCode/delete","post",JSON.stringify({id:row.id})).then(resp=>{
                    console.log(resp)
                    if(resp.data.code === 200){
                        this.activeTable.splice(index,1)
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }else{return}
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
            
        },
        //   表格居中
        cellStyle: function({ row, column, rowIndex, columnIndex }) {
            return "text-align:center;";
        },
        rowClass: function({ row, rowIndex }) {
            return "text-align:center;";
        },
        allSelectionChange: function(val) {
            // 获取选中的内容
            console.log(val);
        },
        // 每页数据的数量
        pageCount: function(val) {
            this.currentCount = val;
            this.searchClick(1)
        },
        // 点击的第几页
        currentPageCount: function(val) {
            this.currentPage = val;
            this.searchClick(1)
        }
    },
    created() {
        let Base64 = require("js-base64").Base64;
        let menuarr = JSON.parse(Base64.decode(sessionStorage.getItem("menuarr")))
        for(var i=0;i<menuarr.length;i++){
            // console.log(menuarr[i].link)
            if(menuarr[i].link === this.$route.path){
                this.jurisdiction = menuarr[i]
            }else{}
        }
        utils.request("/city/list","post",JSON.stringify({page:1,list_rows:999999999})).then(resp=>{
            // console.log(resp)
            this.cityList = resp.data.data.data
        })
        this.searchClick(1)
    }
};
</script>

<style lang="scss" scoped>
.flex {
    display: flex;
    flex-flow: row wrap;
}
</style>


